<template>
  <view class="mine">
    <view class="mine-body">
      <view class="container-bg">
        <view class="container">
          <view class="c_top">
              <view class="avater">
                <image src="./imgs/avater.png"/>
              </view>
              <view class="nickname">
                <view class="name">眼镜用户{{userInfo.user_telphone.substr(-4) }}</view>
                <view class="code">{{userInfo.user_code }}</view>
              </view>

          </view>
        </view>
      </view>
      <view class="content-top">
        <view class="myOrder">
          <view>我的押金</view>

        </view>
        <view class="hasMoney">
          <view class="hasMoneyTop">
            <view class="RMB"></view>
            <view class="money">{{money.all_money ? money.all_money.toFixed(2) : 0}}</view>
          </view>
          <AtButton type='primary' class="backToYou" @click="getMoneyBack">手动返还</AtButton>
        </view>
      </view>
      <view class="content-Nav">
        <AtList :hasBorder="false">
          <AtListItem :hasBorder="true" title='押金记录'  arrow='right' :thumb='icon.deposit' @click="navigatorTo('/pages/deposit/index')" />
          <AtListItem :hasBorder="true" title='取镜记录'  arrow='right' :thumb='icon.jiehuan' @click="navigatorTo('/pages/wallet/index')" />
          <AtListItem :hasBorder="true" title='联系客服'  arrow='right' :thumb='icon.kefu' @click="contactUs" />
          <AtListItem :hasBorder="true" title='常见问题'  arrow='right' :thumb='icon.question' @click="navigatorTo('/pages/question/index')"/>
          <!-- <AtListItem :hasBorder="false" title='关于我们' arrow='right' :thumb='icon.aboutUs'  @click="contactUs"/> -->
        </AtList>
      </view>
      <view class="loginOut">
        <AtButton type="primary" @click="loginOut">退出登录</AtButton>
      </view>
      <AtModal :isOpened="isOpened" @close="isOpened = false" @confirm="isOpened = false" @cancel="isOpened = false">
        <AtModalHeader>联系我们</AtModalHeader>
        <AtModalContent>
          <view class="mainContant">
            <view class="weixin">客服微信:</view>
            <image style="display: inline-block; width: 200rpx;height: 200rpx;" src="./imgs/kefucode.png"></image>
            <view class="phone">客服电话: <text @tap="makePhone" style="color: #FF4949; margin-left: 20rpx;">400-023-0209</text></view>
          </view>
        </AtModalContent>
        <AtModalAction>
          <button @tap="isOpened = false">确认</button>
        </AtModalAction>
      </AtModal>
    </view>
  </view>
</template>

<script setup>
import './index.scss'
import {ref, reactive} from 'vue'
import {query_balance, do_refund, trigger_refund} from '../../http/api'
import Taro, {useDidShow} from '@tarojs/taro'

import { AtButton  ,  AtList , AtListItem, AtModal, AtModalHeader, AtModalContent, AtModalAction  } from 'taro-ui-vue3'
const AvatarUrl = ref('')
AvatarUrl.value = require('../index/imgs/e1.png')
const icon = ref({
  deposit: require('./imgs/deposit.png'),
  jiehuan: require('./imgs/jiehuan.png'),
  kefu: require('./imgs/kefu.png'),
  aboutUs: require('./imgs/aboutus.png'),
  question: require('./imgs/question.png'),
})

const isOpened = ref(false)

const makePhone = () => {
  Taro.makePhoneCall({
    phoneNumber: '400-023-0209',
    complete: (res) =>{
      console.log(res)
    }
  })
}
const money = reactive({
  all_money: 0,
  t_money: 0
})

const userInfo = reactive({
  user_telphone: '',
  user_code: ''
})
function navigatorTo (data) {
  var token_key_obj = Taro.getStorageSync('userData')
  if (token_key_obj) {
    Taro.navigateTo({
      url: data
    })
  } else {
    Taro.showModal({
      title: '温馨提示',
      confirmText: '去登录',
      showCancel: true,
      content: '您现在是未登录状态，请登录之后体验',
      success: (res) => {
        if (res.confirm) {
          Taro.navigateTo({
            url: '/pages/login/index'
          })
        }
      }
    })
  }

}


function getMoneyBack() {
  if (money.t_money <= 0) {
    Taro.showToast({
      title: '当前可提现余额为0',
      icon: 'none',
      duration: 2000
    })
    return
  }
  Taro.getSetting({
      withSubscriptions: true,
      success: (res) => {
        if (!res.subscriptionsSetting.mainSwitch
        || (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings['kVGxFfk0ZW0aGbWr97PbM-bPDmsM8vWIiNAy1L5jEgk']) == 'reject'
      ) {
          Taro.showModal({
            title: '温馨提示',
            showCancel: false,
            content: '为了您能接收到退款提醒消息，请打开设置勾选订阅接受通知消息',
            success: function (res) {
              if (res.confirm) {
                Taro.openSetting({
                  success: function (res) {
                    Taro.showModal({title: '温馨提示',
                    content: '订阅消息通知，方便给您退款通知',
                    showCancel: false,
                    success: function (res) {
                      if (res.confirm) {
                        Taro.requestSubscribeMessage({
                          tmplIds: ['kVGxFfk0ZW0aGbWr97PbM-bPDmsM8vWIiNAy1L5jEgk'],
                          complete: function (Subscribe) {
                          }
                        })
                      } else if (res.cancel) {
                        console.log('用户点击取消')
                      }
                    }})
                  }
                })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        }else {
          Taro.requestSubscribeMessage({
            tmplIds: ['kVGxFfk0ZW0aGbWr97PbM-bPDmsM8vWIiNAy1L5jEgk'],
            complete: function (Subscribe) {
            }
          })
          Taro.showModal({
            title: '余额提现',
            confirmColor:'#ffc600',
            content: `当前可提现金额为¥${money.t_money}, 是否进行余额提现？提现金额预计72小时内到账，请耐心等待~`,
            success: function (res) {
              if (res.confirm) {
                do_refund().then(money => {
                  if(money.code === '1000') {
                    Taro.showToast({
                      title: '提现申请成功，金额返还付款账户',
                      icon: 'success',
                      duration: 2000
                    })
                    getMoney()
                  } else {
                    Taro.showToast({
                      title: `${money.msg}`,
                      icon: 'error',
                      duration: 2000
                    })
                  }
                })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })

        }
      }
    })


}

function getMoney () {
  query_balance().then(res => {
    money.all_money = res.data.all_money
    money.t_money = res.data.t_money
  })
}

const triggerRefund = () => {
  trigger_refund().then(res => {
    console.log(res)
  })
}


useDidShow(() => {
  getMoney()
  var token_key_obj = Taro.getStorageSync('userData')
  if (token_key_obj) {
    userInfo.user_telphone = JSON.parse(token_key_obj).user_telphone
    const str = JSON.parse(token_key_obj).user_code
    userInfo.user_code = str.substr(0,3) + '***' + str.substr(-4);
    triggerRefund()
    // 判断是否打开了权限开关
  } else {
    // Taro.navigateTo({
    //   url: '/pages/login/index'
    // })
  }

})

function contactUs () {
  isOpened.value = true
}

function loginOut () {
  Taro.clearStorage()
  Taro.switchTab({
    url: '/pages/index/index'
  })
}
Taro.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
})
</script>
